<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header" align="center">
          <span span style='font-size:20px'><i class='el-icon-user'></i> 项目1成员绩效考核图</span>
        </div>
      </template>
      <div>
        <div ref="homeOvertimeRef" :options="options" style="height: 350px;width:1200px"></div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, getCurrentInstance,onUnmounted } from 'vue';
import * as echarts from 'echarts';
export default {
  name: 'diagram',
  setup() {
    const { proxy } = getCurrentInstance() as any;
		const state = reactive({

    });
    // 健康报
		const initHomeOvertime = () => {
			const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
			const option = {
						tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  crossStyle: {
                      color: '#999'
                  }
              }
          },
          toolbox: {
              feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
              }
          },
          legend: {
              data: ['达到绩效', '绩效考核','平均绩效', '绩效考核1']
          },
          xAxis: [
              {
                  type: 'category',
                  data: ['张三', '李四', '王五', '赵六', '刘一', '陈二', '孙七'],
                  axisPointer: {
                      type: 'shadow'
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '考核分/分',
                  min: 0,
                  max: 100,
                  interval: 10,
                  axisLabel: {
                      formatter: '{value}'
                  }
              }
          ],
          series: [
              {
                  name: '达到绩效',
                  type: 'bar',
                  data: [96, 92, 91, 80, 91, 85, 92]
              },
              {
                  name: '绩效考核',
                  type: 'bar',
                  data: [80,80,80,80,80,80,80]
              },
              {
                  name: '平均绩效',
                  type: 'bar',
                  data: [89.57,89.57,89.57,89.57,89.57,89.57,89.57]
              },
              {
                  name: '绩效考核1',
                  type: 'line',
                  yAxisIndex: 0,
                  data: [80,80,80,80,80,80,80]
              }
          ]
      };
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};

		// 页面加载前
		onMounted(() => {
			initHomeOvertime();
		});


    return{
      ...toRefs(state),
    };
  },
  data () {
    return {}
  },

  methods: {

  }
}
</script>
<style lang="scss" scoped>
</style>
